.box1
{
    color: blue;
    .box2
    {
        color: red;
    }
    > .box3
    {
        color: yellow;
        &:hover
        {
            color: blue;
        }
    }
    /*为box1设置一个hover*/
    /*&就表示外层的父元素*/
    &:hover
    {
        color: green;
    }
}

.p1
{
    width: 100px;
    height: 200px;
}
/*
.p2
{
    width: 100px;
    height: 200px;
    color: red;
}
*/
/* :extend()对当前选择器扩展指定选择器的样式 */
.p2:extend(.p1)
{
    color: red;
}
.p3
{
    /*直接对指定样式的引用，这里就相当于将p1的样式在这里进行了复制*/
    /*mixin 混合*/
    .p1;
}
/*使用类选择器时可以再选择器后边添加一个括号，这是我们实际上就创建了一个*/
.p4()
{
    width: 100px;
    height: 100px;
    background-color: #bfa;
}
.p5
{
    .p4();
}